<template>
	<view class="content">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="content">
			<view class="top">
				<!-- <image src="../../static/mp-hdpi/组 77.png" mode="scaleToFill" class="tab_bg"></image> -->
				<view class="tab">
					
	<!-- 				<u-tabs :list="list1" 
					    lineWidth="40" 
						lineColor="#FFDC63"
						:activeStyle="{color: '#FFDC63', transform: 'scale(1.05)'}"
						:inactiveStyle="{ color: '#ffffff',transform: 'scale(1)'}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 100rpx;text-align: center;font-size: 32rpx !important;" @click="click"></u-tabs> -->
					<view class="tabs_content">
						<view class="vision">
							<view class="vision_l">
								<view class="">
									<image src="../../static/mp-hdpi/zu12.png" mode="left"></image>
									<text>裸眼视力</text>
								</view>
							</view>
							<view class="vision_r">
								<view class="item">
									<text>R:</text> <text>{{datas.content.R}}</text>
								</view>
								<view class="item">
									<text>L:</text> <text>{{datas.content.L}}</text>
								</view>
							</view>
							<text class="ok">已验光</text>
						</view>
						<view class="optometry">
							<view class="optometry_l">
								<view class="">
									<image src="../../static/mp-hdpi/lujing.png" mode="left"></image>
									<text>验光</text>
								</view>

							</view>
							<view class="optometry_r">
								<view class="item"><view>R:</view></view>
								<view style="display: flex;justify-content: space-between;width: 100%;">
									<view class="item"  style="display: flex;">
										<text>S</text> <text>{{datas.content.rs}}</text>
									</view>
									<view class="item"  style="display: flex;">
										<text>C </text><text>{{datas.content.rc}}</text>
									</view>
									<view class="item"  style="display: flex;">
										<text>A</text> <text>{{datas.content.ra}}</text>
									</view>
								</view>
								<view class="item"><view>L:</view></view>
								
								<view style="display: flex;justify-content: space-between;width: 100%;">
									<view class="item"  style="display: flex;">
										<text>S</text> <text>{{datas.content.ls}}</text>
									</view>
									<view class="item"  style="display: flex;">
										<text>C </text><text>{{datas.content.lc}}</text>
									</view>
									<view class="item"  style="display: flex;">
										<text>A</text> <text>{{datas.content.la}}</text>
									</view>
								</view>
							
							
								<view class="item">
									<text>瞳距</text><text>{{datas.content.pd}}</text>
								</view>
							<!-- 	<view class="item">
									<text>渠道</text><text>{{datas.content.channel}}</text>
								</view> -->

							</view>
						</view>
						
						
						<view class="vision">
							<view class="vision_l">
								<view class="">
									<image src="../../static/mp-hdpi/zu12.png" mode="left"></image>
									<text>备注</text>
								</view>
							</view>
							<view class="vision_r">
								{{datas.content.remark?datas.content.remark:''}}
							</view>
						</view>
						
						<view class="icon">

						</view>
					</view>
				</view>
			</view>
		<!-- 	<view class="center">
				<view class="center_title">
					验光单
				</view>
				<view class="pic_box" >
					<view class="pic_item" v-for="(item, index) in fileList1":key="index">
						<u-avatar  @click="imgPreview(item.url)" shape="square" :src="item.url" size="140rpx" ></u-avatar>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="item">
					<image src="" mode=""></image>
					<view class="arguments">
						<text>销售:</text> <text style="margin-left: 100rpx;">{{datas.sale}}</text>
					</view>
				</view>
				<view class="item">
					<image src="" mode=""></image>
					<view class="arguments">
						<text>验光:</text> <text style="margin-left: 100rpx;">{{datas.optometry}}</text>
					</view>
				</view>
				<view class="item">
					<image src="" mode=""></image>
					<view class="arguments">
						<text>加工:</text> <text style="margin-left: 100rpx;">{{datas.process}}</text>
					</view>
				</view>
				<view class="item">
					<image src="" mode=""></image>
					<view class="arguments">
						<text>价格:</text> <text style="margin-left: 100rpx;">{{datas.price}}</text>
					</view>
				</view>
			</view> -->
		</view>

		
	</view>
</template>

<script>
	import base from '@/config/baseUrl';
	import { myFromInfo } from '@/config/api.js';
	import fTabbar from '@/components/module/f-tabbar/f-tabbar';
	// #ifdef MP-WEIXIN
	// 小程序流量主
	import fAd from '@/components/module/f-ad/f-ad';
	// #endif
	export default {
		components: {
			fTabbar,
			// #ifdef MP-WEIXIN
			fAd,
			// #endif
		},
		data() {
			return {
				list1: [{
					name: '销售',
				}
				// , {
				// 	name: '验光',
				// }, {
				// 	name: '加工'
				// },
				],
				datas:[],
				fileList1:[],
				id:0,
				baseUrl:base.baseUrl,
				ossUrl:base.ossUrl
			}
		},
		onLoad(option) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.id = option.id;
			this.storeinfo();
		},
		methods: {
			imgPreview(url){
				uni.previewImage({
					indicator:"number",
					loop:true,
					urls: [url]
				})
			},
			click(item) {
				console.log('item', item);
			},
			onJump(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 拷贝
			copy(notice) {
				uni.setClipboardData({
					data: notice,
					success(res) {
						uni.showToast({
							title: '复制成功',
							duration: 1000
						})
					}
				})
			},
			storeinfo()
			{
				let _this =this;
				let httpData={
					id:_this.id
				};
				
				myFromInfo(httpData).then((res) => {
					_this.userinfo = res.userinfo
					_this.sales = res.sales
					_this.optometrys = res.optometrys
					_this.processs = res.processs
					if(_this.id > 0)
					{
						_this.datas = res.data
						for(var i=0;i<res.data.content.img.length;i++)
						{
							res.data.content.img[i].url = _this.ossUrl + res.data.content.img[i].url
						}
						_this.fileList1 = res.data.content.img
					}
				}).catch((err) =>{
					
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	
	page{
		background-color: #ecfaf1;
	}
	
	.content {
		width: 750rpx;
		margin: auto;
		background-color: #FFFFFF;

		.top {
			width: 100%;
			

			.tab_bg {
				width: 100%;
				position: absolute;
				top: -40rpx;
			}

			.tab {
				width: 100%;
			}

			.tabs_content {
				margin: 68rpx 36rpx 60rpx 36rpx;
				padding: 20rpx;
				background: #FFFFFF;
				border: 1px dashed #BBBBBB;
				box-shadow: 0rpx 0 20rpx 0rpx rgba(87, 208, 158, 0.3);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				position: relative;
				overflow: hidden;

				.vision,
				.optometry {
					display: flex;
					padding: 20rpx 0;
				}

				.optometry {
					align-items: baseline;
				}

				.vision {

					align-items: center;
					border-bottom: 1rpx solid rgba(3, 3, 3, 0.1);

					.ok {
						position: absolute;
						position: absolute;
						right: 5px;
						top: 25px;
						color: #afafaf;
						font-size: 33px;
						opacity: 0.5;
						-webkit-transform: rotate(45deg);
						transform: rotate(41deg);
					}

					.vision_r {
						flex: none;
						width: 70%;
						font-size: 28rpx;

					}
				}

				.vision_r {
					.item {
						

						height: 75rpx;
						line-height: 75rpx;

						text:nth-child(2n-1) {
							width: 30rpx;
							display: inline-block;
							margin-right: 5%;

						}

						text:nth-child(2n) {
							color: #FDBF1A;
						}
					}
				}

				.optometry_r {
					display: flex;
					flex-wrap: wrap;
					flex: none;
					width: 70%;
					font-size: 28rpx;

					:nth-child(2n-1) {
						// margin-right: 10%;
					}

					.item {
						width: 45%;
						height: 75rpx;
						line-height: 75rpx;

						text:nth-child(2n-1) {
							width: 60rpx;
							display: inline-block;

						}

						text:nth-child(2n) {
							color: #FDBF1A;
							display: inline-block;

						}
					}
				}

				.vision_l,
				.optometry_l {
					width: 30%;
					height: 46rpx;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 46rpx;
					text-align: left;
					position: relative;
                    image{
						position: absolute;
						    height: 40rpx;
						    width: 48rpx;
						    top: -24rpx;
						    left: 32rpx;
					}
					text {
						margin: auto;
						width: 70%;
						display: block;
						// text-align: left;
					}

				}
			}
		}

		.center {
			margin: auto 36rpx;
			// width: 100%;
			padding: 20rpx;

			// height: 340rpx;
			background: #FFFFFF;
			border: 1px dashed #BBBBBB;
			box-shadow: 0rpx 0 20rpx 0rpx rgba(87, 208, 158, 0.3);
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.center_title {
				font-weight: 500;
				font-size: 32rpx;
				margin-bottom: 48rpx;

				text {
					margin-left: 20rpx;
					font-weight: 100;
					font-size: 24rpx;
				}
			}

			.pic_box {
				display: flex;
				align-items: center;

				.pic_item {
					width: 164rpx;
					height: 164rpx;
					background: #FFFFFF;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					border: 2rpx dashed #AAAAAA;
					padding: 12rpx;
					margin-right: 20rpx;

					.pic {
						max-height: 100%;
						max-width: 100%;
						margin: auto;
					}
				}
			}

		}

		.bottom {
			margin: 50rpx 36rpx;
			padding: 38rpx 40rpx;
			background: #FFFFFF;
			border: 1px dashed #BBBBBB;
			box-shadow: 0rpx 0 20rpx 0rpx rgba(87, 208, 158, 0.3);
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			.item {
				display: flex;
				align-items: center;

				image {
					width: 32rpx;
					height: 25rpx;
				}

				.arguments {
					display: flex;
					width: 95%;
					// justify-content: space-between;
					font-size: 32rpx;
					line-height: 60rpx;

					text:nth-child(2n) {
						color: #FDBF1A;
					}
				}
			}
		}
	}
</style>